<template>
    <div class="addPledge">
        <assets-head :title="$t('新增质押')"></assets-head>
        <div class="contentBox">
            <div class="imgBox"><img src="../../assets/image/addpledgeBg.png" alt="" /></div>
            <div class="px-32">
                <div class="content box-shad tabBackground">
                    <div class="mb-38">
                        <div class="font-32 textColor">{{$t('质押')}}</div>
                        <div class="flex mt-20 h-96 items-center inputBox inputBackground1 textColor relative">
                            <input class="h-full pl-22 inputBackground1" type="text" v-model="pledgeAmount" :placeholder="$t('请输入质押数量')" @input="changeMount" />
                            <div class="right w-252 h-62 flex items-center pl-26 box-border">
                                <img :src="`${HOST_URL}/symbol/${pledgeCurrency.toLowerCase()}.png`" class="w-48 h-48" alt="" />
                                <span class="ml-14 mr-30 w-90">{{pledgeCurrency.toUpperCase()}}</span>
                            </div>
                        </div>
                        <div class="flex items-center font-24 mt-16 text-grey">
                            {{$t('可用余额')}}：<span class="mr-14">{{volume || '--'}}&nbsp;{{pledgeCurrency.toUpperCase()}}</span>
                            <img click="$router.push('/exchange/exchangePage')" src="../../assets/image/exchangeIcon.png" class="w-28 h-28" alt="" />
                        </div>
                        <div class="flex justify-between font-32 mt-48">
                            <div class="text-grey">{{$t('质押后质押率')}}</div>
                            <div class="textColor">{{pledgeRate!==''?(pledgeRate*10000/100).toFixed(2):'--'}}%</div>
                        </div>
                        <div class="h-96 lh-96 btnMain rounded-lg text-center text-black font-34 mt-96" @click="getReplenishOrder">{{$t('确认质押')}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from "@/API/pledgeLoan.js";
import { _getAllWallet } from "@/API/fund.api";
import { HOST_URL } from '@/config'
import { debounce } from '@/utils/utis'
    export default {
        props: {

        },
        components: {
            assetsHead
        },
        data(){
            return {
                HOST_URL,
                walletList: [],
                id:'',
                pledgeAmount:'',
                pledgeRate:'',//质押率
                pledgeCurrency: '', //质押币种
                volume: '', //可用余额
            }
        },
        mounted(){
            this.id = this.$route.query.id
            this.pledgeCurrency = this.$route.query.pledgeCurrency
            this.getList()
        },
        methods: {
            changeMount(){
                if (this.pledgeAmount >= this.volume){
                    this.pledgeAmount = this.volume
                }

                this.debounceFn()
                
            },
            debounceFn: debounce(function () {
                this.getLoanParam()
            }, 500),
            getLoanParam() {
                if (this.pledgeAmount == '') {
                    this.$toast(this.$t('请输入质押数量'))
                    return false
                }
                Axios.getLoanParam({
                    loanOrderId: this.id,
                    pledgeAmount: this.pledgeAmount
                }).then(res => {
                    this.pledgeRate = res.data.pledgeRate
                }).catch(error => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}    
                })
            },
            getList() {
                _getAllWallet().then((res) => {
                    this.walletList = res.extends;
                    let initObj = this.walletList.find(item => {
                        return item.symbol.toLowerCase() == this.pledgeCurrency
                    })
                    this.volume = initObj.usable
                });
            },
            getReplenishOrder(){
                if (this.pledgeAmount == '') {
                    this.$toast(this.$t('请输入质押数量'))
                    return false
                }
                Axios.replenishOrder({
                    loanOrderId: this.id,
                    pledgeAmount: this.pledgeAmount
                }).then(res=>{
                    this.$toast(this.$t('质押成功'));
                    this.$router.push('/pledgeLoanOrder')
                }).catch(error => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}         
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.addPledge{
    width: 100%;
    box-sizing: border-box;
}
.contentBox {
    position: relative;
    .imgBox {
        width: 100%;
        height: 300px;

        img {
            width: 100%;
            height: 100%;
        }
    }
    .content {
        border-radius: 8px;
        padding: 36px 30px 36px 34px;
        position: relative;
        margin-top: -92px;
        .inputBox {
            input {
                flex: 1;
                border: none;
            }

            .right {
                border-left: 1px solid #B8BCC5;
            }
        }

    }
}
.slectBox {
    position: absolute;
    left: 0;
    top: 114px;
    width: 100%;
    background: $main_background;
    border-radius: 4px;
    padding: 0px 20px 76px 20px;
    box-sizing: border-box;
    border: 1px solid $line_color;
    z-index: 2;
    &.slectBoxMax {
            max-height: 574px;
            overflow-y: auto;
        }
}
</style>